<template>
	<view>
		<view class="main">
			<view class="slogin u-m-b-50">欢迎登录小康云商家</view>

			<u-form error-type="[border-bottom,toast]" :model="form1" ref="form1El" v-show="loginType==1">
				<u-form-item prop="userName">
					<u-input v-model="form1.userName" placeholder="请输入账号或手机号"></u-input>
				</u-form-item>
				<u-form-item prop="passWord">
					<u-input v-model="form1.passWord" type="password" placeholder="请输入密码"></u-input>
				</u-form-item>
			</u-form>

			<u-form error-type="[border-bottom,toast]" :model="form10" ref="form10El" v-show="loginType==10">
				<u-form-item prop="userName">
					<u-input type="number" v-model="form10.userName" placeholder="请输入手机号"></u-input>
					<template #right>
						<u-button plain open-type="getPhoneNumber" @getphonenumber="getphone" type="warning"
							:custom-style="indexHooks.custmStyle()" size="mini" shape="circle">获取手机号</u-button>
					</template>
				</u-form-item>
				<u-form-item prop="code">
					<u-input v-model="form10.code" placeholder="请输入验证码"></u-input>
					<template #right>
						<u-button plain type="warning" :custom-style="indexHooks.custmStyle()" size="mini"
							shape="circle" @click="getCode">{{tips}}</u-button>
					</template>
				</u-form-item>
			</u-form>


			<view class="u-m-t-33 u-p-t-22 u-p-b-10">
				<u-checkbox-group>
					<u-checkbox v-model="agreement">
						<view class="lh-small u-flex"><text class="u-line-1">我已阅读并同意</text>
							<navigator url="/subpackage/my/login/agreement" hover-class="none" style="display:inline">
								<text class="u-line-1" style="color: #4888de;">《小康管家商户服务协议》</text>
							</navigator>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>

			<view class="u-m-t-50">
				<u-button type="warning" :customStyle="indexHooks.custmStyle()" @click="submit">登录</u-button>
			</view>


			<view class="u-flex u-row-between color-gary-xs u-font-sm u-m-t-25">
				<text v-if="loginType==1" @click="loginType = 10">短信验证码登录</text>
				<text v-else-if="loginType==10" @click="loginType = 1">账号密码登录</text>
			</view>

		</view>




		<!-- 角色选择弹窗 -->
		<u-popup mode="center" v-model="showRole" border-radius='35'>
			<view class="Model">
				<view class="head">
					<view class="large">HELLO!</view>
					<view class="large">请选择登录身份</view>
				</view>
				<view class="bodys">
					<view class="items" @click="seleRoleFun(3)">
						<view class="imgbBox bg2">
							<image mode="widthFix" src="@/static/images/login/role3.png"></image>
						</view>
						<text>我是商户</text>
					</view>
					<view class="items" @click="seleRoleFun(4)">
						<view class="imgbBox bg1">
							<image mode="widthFix" src="@/static/images/login/role4.png"></image>
						</view>
						<text>我是服务员</text>
					</view>

				</view>
			</view>
		</u-popup>

		<!-- <u-popup mode="center" v-model="showTenant" border-radius="35">
      <view class="Modal">
        <view class="head">
          <view class="large">请选择租户</view>
        </view>
      </view>
    </u-popup> -->
		<u-picker v-model="showTenant" mode="selector" :range="tenantList" range-key="name" title="请选择租户"
			@confirm="toLogin">

		</u-picker>




		<!-- 验证码 -->
		<u-verification-code :seconds="seconds" ref="uCodeEl" @change="codeChange"></u-verification-code>
	</view>
</template>

<script setup lang="ts">
	import { onReady, onLoad } from '@dcloudio/uni-app'
	import { computed, reactive, ref, unref, watch } from "vue";
	import * as indexHooks from '@/hooks';
	import * as userHooks from '@/hooks/user';
	import userSotre from '@/store/user';
	import userApi from '@/api/user';
	const userPinia = userSotre()
	const agreement = ref(false)
	const loginType = ref(1)//登录方式

	const showRole = ref(false)

	const form1El = ref(null)
	const form10El = ref(null)
	const uCodeEl = ref(null)

	const seconds = ref(60)
	const tips = ref('')

	const showTenant = ref(false)
	const tenantList = ref([])

	const codeChange = (text : string) => {
		tips.value = text
	}

	const form1Rules = reactive({
		userName: {
			required: true,
			message: '请输入账号或手机号',
			trigger: ['change', 'blur'],
		},
		passWord: [
			{
				required: true,
				message: '请输入密码',
				trigger: ['change', 'blur'],
			},
			{
				min: 6,
				message: '密码不能小于6位数',
				trigger: ['blur', 'change']
			}
		],

	})

	const form10Rules = reactive({
		userName: [
			{
				required: true,
				message: '请输入手机号',
				trigger: ['change', 'blur'],
			},
			{
				min: 11,
				message: '请输入11位数手机号',
				trigger: ['change', 'blur'],
			},
			{
				max: 11,
				message: '请输入11位数手机号',
				trigger: ['change', 'blur'],
			}
		],
		code: {
			required: true,
			trigger: ['change', 'blur'],
			message: '请输入验证码',
		}

	})

	const form1 = reactive({//账号密码登录
		userName: '',
		passWord: ''
	})
	const form10 = reactive({//验证码登录
		userName: '',
		code: ''
	})
	let userType = "" // 选择的类型，3是服务员4是商户

	const seleRoleFun = (type) => {
		userPinia.setUserRole(type)
		userType = type
		getTenantList()
	}


	const confirmTenant = () => {
	}

	const submit = () => {
		if (!agreement.value) return uni.showToast({
			title: '请同意用户协议',
			icon: 'none'
		})



		if (loginType.value == 1) {//账号密码登录
			form1El.value.validate((valid : boolean) => {
				if (valid) {
					showRole.value = true
				} else {
					return
				}
			})
		} else if (loginType.value == 10) {//验证码登录
			form10El.value.validate((valid : boolean) => {
				if (valid) {
					showRole.value = true
				} else {
					return
				}
			})
		}


	}


	const getphone = (e) => {
		userHooks.getUserIphone(e, () => {
			form10.userName = userPinia.iphone
		})
	}

	const getCode = () => {
		if (form10.userName === "") return uni.showToast({
			title: '请先填写手机号',
			icon: 'none'
		})

		if (form10.userName.length != 11) return uni.showToast({
			title: '请输入11位手机号',
			icon: 'none'
		})

		if (uCodeEl.value.canGetCode) {
			uni.showLoading({
				title: '发送中...',
			})
			userApi.msgSms({
				mobile: form10.userName,
				smsType: 101,
				useType: 1
			}).then(res => {
				uni.showToast({
					title: '验证码已发送',
					success: () => {
						uCodeEl.value.start()
					}
				})
			}).finally(() => {
				uni.hideLoading()

			})
		} else {
			uni.showToast({
				title: '倒计结束后再发送',
			})
		}


	}

	const getTenantList = async () => {
		const params = {
			userRole: userType,
			userName: form1.userName
		}
		const { data } = await userApi.getTenantList(params)
		if (data.length > 0) {
			tenantList.value = data || []
			if (unref(tenantList).length == 1) {
				toLogin([0])
			} else {
				showTenant.value = true
			}
		} else {
			uni.showToast({ title: '暂无信息，请检查账号', icon: 'none' })
		}


	}

	const toLogin = ([index]) => {
		let obj = {
			loginType: loginType.value,
			tenantId: unref(tenantList)[index].value,
		}

		if (loginType.value == 1) {
			obj = Object.assign(obj, form1)
		} else if (loginType.value == 10) {
			obj = Object.assign(obj, form10)
		}



		userHooks.toLogin(obj, () => {
			showRole.value = false
			uni.switchTab({
				url: '/pages/my/my'
			})
		})
	}
	watch(loginType, () => {
		form1El.value.resetFields()
		form10El.value.resetFields()
	})



	onLoad(() => {

	})

	onReady(() => {
		form1El.value.setRules(form1Rules);
		form10El.value.setRules(form10Rules);
	})
</script>

<style lang="scss" scoped>
	.main {
		padding: 55upx 80upx 0;

		.slogin {
			font-size: 44upx;
			font-weight: 800;
			color: #FFC300;
		}
	}

	.Model {
		width: 76vw;
		min-height: 68vh;
		overflow: hidden;

		.head {
			padding: 40upx 35upx 0;

			view:first-child {
				font-size: 38upx;
				font-weight: 700;
			}

			view:last-child {
				font-size: 24upx;
				color: #afafaf;
			}
		}

		.bodys {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #9c9c9c;
				margin-top: 12rpx;
			}

			.items {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 58upx;

				.imgbBox {
					width: 200upx;
					height: 200upx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					overflow: hidden;

					image {
						width: 150upx;
					}
				}

				.bg1 {
					background-color: #fce3d3;
				}

				.bg2 {
					background-color: #fcf5cf;
				}
			}
		}
	}
</style>